// 调用函数 动态渲染生成页面内容
setPage();

// 通过事件委托语法形式 给标签添加点击事件效果
$('.container').click(function (e) {
    // 获取 localStorage 中 存储的数据
    const cartArr = JSON.parse(window.localStorage.cart);

    // 全选点击事件
    if (e.target.getAttribute('name') === 'all') {
        // 给 数组中所有对象 buy 属性 设定属性值 
        // 是 全选input标签 checked属性值
        cartArr.forEach(item => {
            item.buy = e.target.checked;
        })

        // 其他input点击事件
    } else if (e.target.getAttribute('name') === 'other') {
        // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 购买状态
        // 索引下标相同的对象 其中 buy属性值 是 点击的标签 checked属性值
        cartArr[e.target.getAttribute('index') - 0].buy = e.target.checked;

        // 减按钮点击事件
    } else if (e.target.getAttribute('name') === '-') {
        // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
        // num属性值 累减 1 如果等于 1 禁用 当前标签
        cartArr[e.target.getAttribute('index') - 0].num--;

        // 加按钮点击事件
    } else if (e.target.getAttribute('name') === '+') {
        // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
        // num属性值 累加 1 如果等于 库存 禁用 当前标签
        cartArr[e.target.getAttribute('index') - 0].num++;

        // 我不要按钮点击事件
    } else if (e.target.getAttribute('name') === 'del') {
        if (window.confirm('您确定要删除吗?')) {
            // 给 索引下标 和 点击标签存储的index值 相同的数据 删除
            cartArr.splice(e.target.getAttribute('index') - 0, 1);
        }
    }


    // 将新的数组 存储到 localStorage 中 
    window.localStorage.cart = JSON.stringify(cartArr);
    // 调用函数 再次动态渲染生成页面
    setPage();

})



// 动态渲染生成页面内容
function setPage() {
    // 定义变量 存储 结果 设定 全选按钮的属性
    let all = true;
    // 定义变量 存储 商品种类 商品数量 商品总价格
    let type = 0;
    let number = 0;
    let money = 0;



    // 实际项目中 应该是想数据库发送请求获取购物车商品信息
    // 当前是 获取 localStorage中存储的 购物车商品信息

    // localStorage中没有cart属性
    if (window.localStorage.cart === undefined) {
        // 调用结果是 undefined 证明 没有 cart属性 
        // 生成 对应的 页面内容
        $('.container').html('<h1>您还没有购买记录,请您先去选择要购买的商品</h1>');

    } else {
        // 调用结果是 undefined 证明 有 cart属性
        // 其中存储的是 json字符串 需要还原为对应的数据结构
        const cartArr = JSON.parse(window.localStorage.cart);

        if (cartArr.length === 0) {
            // 如果是 空数组 生成对应的页面内容
            $('.container').html('<h1>您的购物车已经被男朋友清空了,请您继续放心大胆的购物</h1>');

        } else {
            // 不是 空数组 根据 数组内容 动态渲染生成页面
            // li之前的固定内容 + 根据数组动态生成的li标签 + li之后的固定内容

            // li之前的内容
            let str = `      
    <div class="panel panel-info ">
      <div class="panel-body bg-info">
        <div class="checkbox">
          <label>
            <input name="all" type="checkbox" value="">
            全选
          </label>
        </div>
      </div>
      <div class="panel-footer">
        <ul class="cart-list">
  ` ;


            // 根据数组 动态渲染生成的 li
            cartArr.forEach((item, key) => {
                if (item.buy) {
                    // 如果商品的购买状态是true
                    // 累加计算 购买商品的种类 数量 总价
                    type++;
                    number += item.num;
                    money += item.num * item.goods_price;

                } else {
                    // 如果商品的购买状态是false
                    // 给全选checked属性值赋值false
                    all = false;
                }

                // item 是 存储数据的 对象
                str += `
      <li class="cart-item">
        <div class="left">
          <input name="other"  index="${key}"  type="checkbox" ${item.buy ? 'checked' : ''}>
        </div>
        <div class="right">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="${item.goods_small_logo}" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">${item.goods_name}</h4>
              <p>
                <i class="glyphicon glyphicon-yen"></i>
                <span>${item.goods_price}</span>
              </p>
              <div class="btn-group pull-right" role="group" aria-label="...">
                <button name="-" index="${key}" ${item.num <= 1 ? 'disabled' : ''} type="button" class="btn btn-default">-</button>                             
                <button type="button" class="btn btn-default" disabled>${item.num}</button>
                <button name="+" index="${key}" ${item.num >= item.goods_number ? 'disabled' : ''} type="button" class="btn btn-default">+</button>
              </div>
              <button name="del" index="${key}" class="del btn btn-danger">我不要了</button>

            </div>
          </div>
        </div>
      </li>
    
    
    `;
            })


            // li之后的内容
            str += `
        </ul>

        <div>
          <h1>您一共购买${type}种商品</h1>
          <h1>您一共购买${number}件商品</h1>
          <h1>您一共需要支付${money.toFixed(2)}元</h1>
        </div>
      </div>
    </div>
  `;

            // 内容写入 标签中
            $('.container').html(str);

            // 设定全选标签的checked属性值
            $('[name="all"]').prop('checked', all);

        }
    }

}